<template recyclable>
    <div class="card-wrapper" >
       <div class="order-box">
           <div class="order-info">
               <text>订单号：{{itemValue.ex.orderSn}}</text>
           </div>
           <div class="product-list">
               <div class="product-box" v-for="item in itemValue.products">
                   <image :src="item.image" class="product-image"></image>
                   <div class="product-info">
                       <text class="product-title">{{item.name}}</text>
                       <text class="product-tag" v-if="item.type === 'test'">测评类</text>
                       <text class="product-tag" v-else >视频类</text>
                       <div class="price">
                           <text class="product-icon">￥</text><text class="product-price">{{item.price}}</text>
                       </div>
                   </div>
               </div>
           </div>
           <div class="product-bottom">
               <text class="order-status" v-if="itemValue.ex.status === 'unpaid'">未付款</text>
               <text class="order-status" v-if="itemValue.ex.status === 'complete'">已付款</text>
               <text class="order-status" v-if="itemValue.ex.status === 'cancel'">已取消</text>
               <div @click="cancelOrder(itemValue.id)" v-if="itemValue.ex.status === 'unpaid'">
                   <text class="cancel-order" :style="{fontFamily: 'wxcIconFont'}">{{'\ue61b '}} 取消订单</text>
               </div>
           </div>
       </div>
    </div>
</template>

<script>
  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex:{}}
        }
      },
      itemIndex: {type: Number, default: -1},
      onItemClick:{type:Function}
    },
    components: {},
    methods: {
      cancelOrder() {
        this.onItemClick && this.onItemClick(this.itemIndex);
      }
    },
    data() {
      return {}
    },
  }
</script>
<style scoped lang="scss" >
    @import '../../config/styles.scss';
    .card-wrapper {
        width: 750px;
        background-color: white;
        box-shadow: $--box-shadow-color;
    }
    .product-image{
        width:216px;
        height: 154px;
    }
    .order-info{
        height:60px;
        background-color: #eeeeee;
        padding-left:20px;
        padding-right:20px;
    }
    .product-list{
        padding:20px;
        border-style: solid;
        border-color: #ffffff;
        border-bottom-width: 2px;
        box-shadow:0px 2px 32px 0px rgba(67,74,84,0.09);
    }
    .product-box{
        flex-direction: row;
        justify-content:space-between
    }
    .product-info{
        width:470px;
        margin-left:30px;
    }
    .product-title{
        color: #434A54;
        font-size: 36px;
    }
    .product-tag{
        color: #00BB9A;
        border-style: solid;
        border-color: #00BB9A;
        border-width: 2px;
        border-radius: 16px;
        padding: 5px;
        width:80px;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 20px;
        text-align:center
    }
    .price{
        justify-content:left;
        flex-direction: row;
        align-items: flex-end
    }
    .product-price{
        color:#FF0000;
        font-size:33px;
    }
    .product-icon{
        color:#FF0000;
        font-size:26px;
    }
    .product-bottom{
        width:710px;
        height:60px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .cancel-order{
        width: 160px;
        font-size:28px;
        color:#434A54;
    }
    .order-status{
        width:200px;
        font-size:28px;
        color:#999999;
        padding-left:30px;
    }
</style>
